<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type='text']{
            border: 1px solid #333;
            width: 250px;
            height: 40px;
            outline: none;
        }
        input[type='text']:focus{
            border-color: orange;
        }
    </style>
</head>
<body>

    <!-- 
        form  表单 (1. 收集数据  2. 提交数据(表单会自动提交))
        action 提交数据的地址
        method 提交数据的方式(get / post)

        以get方式提交数据,会将参数数据队列提交到action所指的url中,以?分隔

        参数数据  => 表单中提交的数据(键值对形式存在) 键名(name属性) 键值(实际值) => user=a123123
        队列(数据可以传递多条,多条数据之间用&分隔)  user=a123123&pwd=123123


        location.search => 参数数据队列 "?user=a123123&pwd=123123"
        location.hash  => 哈希值(锚点)  "#one"
     -->
    <!-- 
         /jiekou.php    提交给后端接口 (提交给后端)
        ./search.html  提交给其他页面   (给其他页面传递数据)
    -->
    <a href="#one">one</a>
    <a href="#two">two</a>
    <a href="#three">three</a>
    <form action="./search.html" method="get">
        <p>
            <label>用户名</label>
            <input type="text" name="user">
        </p>
        <p>
            <label>密&emsp;码</label>
            <input type="text" name="pwd">
        </p>
        <input type="submit" value="提交">
        <button>提交</button>
    </form>
</body>
<script>
    // 节点的层级关系
    // parentNode
    // parentElement

    // childNodes
    // children
    
    // firstChild
    // firstElementChild

    // lastChild
    // lastElementChild

    // previousSibling
    // previousElementSibling

    // nextSibling
    // nextElementSibling


    // 增
    // document.createElement()
    // document.createTextNode()

    // parentNode.appendChild(node)
    // parentNode.append(node|string)
    // parentNode.prepend(node|string)
    
    // parentNode.insertBefore(node)

    // 删
    // Element.remove()
    // parentNode.removeChild(node)
    
    // 替换
    // parentNode.replaceChild(newNode,oldNode)

    // 克隆
    // Element.cloneNode(true/false)

    // 常见的事件
    // onload onresize onscroll
    // onclick onmousedown  onmouseover(onmouseenter) 
    // onkeydown  onkeyup  onkeypress
    // onfocus  onblur  onchange  oninput  onsubmit onreset



</script>
</html>